.dropzone {
  // width: 100%;
  display: block;
  position: relative;
  // cursor: pointer;
  border-radius: 4px;
  background: #f0f1f6;

  // @include themify($themes) {
  //   border: 1px solid #979797;
  // }

  .dropzone__input {
    width: 100%;
    height: 100%;
    // margin: 15px;
    margin-bottom: 2px;
    min-height: 98px;
    display: flex;
    background: #fff;
    // border-radius: 4px;
    // border-bottom-left-radius: 4px;
    // border-bottom-right-radius: 4px;
    // position: absolute !important;
    cursor: pointer;
  }

  .dropzone__drop-here {
    margin: auto;
    color: #676767;
  }

  .dropzone__imgs-wrapper {
    // padding: 15px 7.5px 0px 7.5px;
    padding: 20px 12.5px 0px 12.5px;
    // width: calc(100% + 30px);
    // width: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  @media screen and (max-width: 360px) {
    .dropzone__imgs-wrapper {
      padding: 20px 8.5px 0px 8.5px;
    }
  }

  @media screen and (max-width: 414px) {
    .dropzone__holder {
      width: 50% !important;
    }
  }

  .dropzone__holder {
    width: 50%;

    .dropzone__img {
      // margin-bottom: 15px;
      // width: calc(16.6667% - 26px);
      // width: calc(25% - 15px);
      // height: 70px;
      height: 100px;
      overflow: unset;
      margin-left: 7.5px;
      margin-right: 7.5px;
      position: relative;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: top;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      background-color: #fff;

      // @include themify($themes) {
      //   outline: 1px solid #eee;
      // }

      // border: 1px solid #ddd;
      box-shadow: 0 0px 10px 0px rgba(0, 0, 0, 0.15);
      border-bottom: none;

      &:before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        transition: all 0.3s;
        cursor: pointer;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }

      &:hover {

        &:before {
          // background-color: rgba(25, 25, 25, 0.2);
        }

        // .dropzone__img-delete {
        //   opacity: 1;
        // }

        // .dropzone__img-name {
        //   opacity: 0.7;
        // }
      }
    }

    .dropzone__img-name {
      color: #555;
      background: rgba(255, 255, 255, 1);
      border-color: transparent;
      padding: 3px 5px;
      // text-shadow: 1px 0 0 #fff, 0 -1px 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff;
      position: absolute;
      font-size: 10px;
      text-align: center;
      opacity: 1;
      transition: all 0.3s;
      z-index: 2;
      width: 100% !important;
      line-height: 11px;
      margin: 0;
      // top: calc(50% - 6px);
      // left: 5px;
      bottom: 0px;
    }

    .dropzone__img-delete {
      transition: all 0.3s;
      position: absolute;
      top: 10px;
      right: 15px;
      z-index: 10;
      cursor: pointer;
      background: transparent;
      opacity: 0;
      color: white;
      font-size: 9px;
      border: 1px solid white;
      text-transform: uppercase;
      padding: 2px 7px;
      line-height: 10px;
    }

    .dropzone__img-delete-custom {
      font-family: 'Open Sans', sans-serif;
      -webkit-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
      position: relative;
      width: calc(100% - 15px);
      z-index: 2;
      // margin: 0px 7.5px 15px;
      margin: 0px 7.5px 20px;
      display: block;
      cursor: pointer;
      background: #555;
      opacity: 1;
      color: white;
      font-size: 9px !important;
      border: 1px solid #555;
      text-transform: uppercase;
      padding: 7px;
      line-height: 10px;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
    }
  }

  &.dropzone--single {
    height: 300px;

    .dropzone__img {
      margin: 0;
      height: 100%;
      width: 100%;
      text-align: center;

      img {
        padding: 20px;
        height: 100%;
        width: auto;
      }
    }

    .dropzone__input:hover {

      @include themify($themes) {
        background-image: linear-gradient(-45deg, themed('colorBorder') 25%, transparent 25%,
          transparent 50%, themed('colorBorder') 50%, themed('colorBorder') 75%, transparent 75%, transparent);
      }

      background-size: 30px 30px;
      animation: striped 2s linear infinite;

      @keyframes striped {
        from {
          background-position: 0 0
        }

        to {
          background-position: 60px 30px
        }
      }
    }
  }

  // &.dropzone--custom-height {
  //   min-height: 300px;
  //   height: auto;

  //   .dropzone__img {
  //     max-width: 100%;

  //     img {
  //       max-width: 100%;
  //       height: auto;
  //     }
  //   }
  // }

  &.dropzone--multiple {
    min-height: 100px;

    .dropzone__input {
      max-height: 100px;
    }

    // .dropzone__input {

    //   @include themify($themes) {
    //     background-image: linear-gradient(-45deg, themed('colorBorder') 25%, transparent 25%,
    //       transparent 50%, themed('colorBorder') 50%, themed('colorBorder') 75%, transparent 75%, transparent);
    //   }

    //   background-size: 30px 30px;
    //   // animation: striped 2s linear infinite;

    //   @keyframes striped {
    //     from {
    //       background-position: 0 0
    //     }

    //     to {
    //       background-position: 60px 30px
    //     }
    //   }
    // }
  }
}